<!-- 发现页 -->
<template>
  <view class="page-e tn-safe-area-inset-bottom">
    <view class="top-backgroup">
      <image
        class="backgroud-image"
        mode="widthFix"
        src="https://lemawuyou.oss-cn-shanghai.aliyuncs.com/client/images/mine/my-bg4.png"
      ></image>
    </view>

    <view class="notification">
      <title-bar class="title-bar">
        官方公告
        <template slot="extra">
          <navigator url="/minepages/communique">
            <text class="label">全部</text>
            <text class="icon tn-icon-right"></text>
          </navigator>
        </template>
      </title-bar>
      <notification :notice="latestNotice"></notification>
    </view>

    <view class="orders">
      <title-bar class="title-bar" barColor="#000000">我的订单</title-bar>
      <orders :isShow="isShow"></orders>
    </view>

    <view class="chats">
      <title-bar class="title-bar" barColor="#000000">消息</title-bar>
      <chats></chats>
    </view>

    <view @tap="handleCreateClick">
      <tn-button
        class="create"
        shape="icon"
        width="108rpx"
        height="108rpx"
        backgroundColor="#D8D8D8"
      >
        <text class="tn-icon-add"></text>
      </tn-button>
    </view>

    <view class="tn-tabbar-height"></view>
    <view class="bg-tabbar-shadow"></view>
  </view>
</template>

<script>
import Chats from "../../../PageFcomponent/Chats.vue";
import Notification from "../../../PageFcomponent/Notification.vue";
import Orders from "../../../PageFcomponent/Orders.vue";
import TitleBar from "../../../PageFcomponent/TitleBar.vue";
import { getNoticeList } from "@/api/index.js";

export default {
  name: "Discovery",
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    TitleBar,
    Notification,
    Orders,
    Chats,
  },
  data() {
    return {
      userInfoObj: {},
      shouqianModal: false,
      latestNotice: null,
    };
  },
  computed: {
    isLoggedIn() {
      try {
        return !!uni.getStorageSync('userInfo')
      } catch (e) {
        return false
      }
    }
  },
  onReady() {
    this.userInfoObj = this.$store.getters.getUserInfo;
  },
  created() {
    this.loadLatestNotice();
  },
  methods: {
    goLogin() {
      uni.showToast({ icon: 'none', title: '请先登录' })
      uni.navigateTo({ url: '/pages/login/index' })
    },
    async loadLatestNotice() {
      try {
        const res = await getNoticeList({});
        const list = Array.isArray(res?.rows)
          ? res.rows
          : (Array.isArray(res) ? res : (res?.data?.records || res?.data?.rows || []));
        this.latestNotice = list && list.length > 0 ? list[0] : null;
      } catch (e) {
        this.latestNotice = null;
      }
    },
    handleCreateClick() {
      const isLoggedIn = this.isLoggedIn
      if (!isLoggedIn) {
        return this.goLogin()
      }
      uni.navigateTo({ url: '/discoverypages/order?mode=create' })
    }
  }
};
</script>

<style lang="scss" scoped>
.page-e {
  max-height: 100vh;
  background-color: #f3f4f6;
}

/* 底部安全边距 start*/
.tn-tabbar-height {
  min-height: 120rpx;
  height: calc(140rpx + env(safe-area-inset-bottom) / 2);
  height: calc(140rpx + constant(safe-area-inset-bottom));
}

/* 底部tabbar假阴影 start*/
.bg-tabbar-shadow {
  // background-image: repeating-linear-gradient(to top, rgba(0,0,0,0.1) 10rpx, rgba(255,255,255,0) , rgba(255,255,255,0));
  box-shadow: 0rpx 0rpx 400rpx 0rpx rgba(0, 0, 0, 0.25);
  position: fixed;
  bottom: calc(0rpx + env(safe-area-inset-bottom) / 2);
  bottom: calc(0rpx + constant(safe-area-inset-bottom));
  height: 60rpx;
  width: 100vw;
  z-index: 0;
}

.tn-color-wallpaper {
  color: #1d2541;
}

/* 顶部背景图 start */
.top-backgroup {
  height: 450rpx;
  z-index: -1;
  margin-bottom: -256rpx;

  .backgroud-image {
    width: 100%;
    height: 450rpx;
    // z-index: -1;
  }
}

/* 顶部背景图 end */

.title-bar {
  margin-bottom: 30rpx;
}

.notification,
.orders,
.chats {
  display: flex;
  flex-direction: column;
}

.notification {
  padding: 0 24rpx 0 24rpx;

  .more {
    gap: 12rpx;

    .label {
      font-weight: 500;
      font-size: 28rpx;
      color: #3d3d3d;
    }

    .icon {
      width: 24rpx;
      height: 24rpx;
    }
  }
}

.orders {
  margin-top: 44rpx;
  padding: 0 24rpx 0 24rpx;
  position: relative;

  .login-overlay {
    position: absolute;
    left: 24rpx;
    right: 24rpx;
    top: 0;
    bottom: 0;
    z-index: 10;
    background: rgba(255,255,255,0.01);
  }
}

.chats {
  margin-top: 44rpx;
  padding: 0 24rpx 0 24rpx;
}

.messages {
  margin-top: 24rpx;

  .title-bar {
    padding: 0 24rpx 0 24rpx;
  }
}

.create {
  position: fixed;
  bottom: calc(140rpx + env(safe-area-inset-bottom) / 2 + 38rpx);
  bottom: calc(140rpx + constant(safe-area-inset-bottom) + 38rpx);
  right: 14rpx;

  text {
    font-size: 64rpx;
    font-weight: 800;
    color: rgba(61, 61, 61, 0.5);
  }
}

/* 登录覆盖层样式 */
.login-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  z-index: 10; /* 确保覆盖在最上层 */
}
</style>